<template>
  <div style="display: flex;">
  <div class="checkbox">
    <input type="checkbox" class="checkboxInput" :id="ENG_CHARS[index]" name="" />
    <label :for="ENG_CHARS[index]"></label> 
  </div>
  <label :for="ENG_CHARS[index]">{{ ENG_CHARS[index] }}</label>
</div>
</template>

<script>

export default {
  props: {
    index:{
      type:Number,
      default: 0,
    },
  },
  data() {
    return {
      ENG_CHARS: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
      ],
    }
  },
  methods:{

  }
}

</script>

<style scoped>
  .checkbox input[type=checkbox] {
    visibility: hidden;
  }
    
  .checkbox {
    width: 16px;
    height: 16px;
    background: #fff;
    margin: 8px;
     
    border-radius: 100%;
    border: 1px solid #d9d9d9;
    position: relative;
  }
    
  .checkbox label {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 100%;
     
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
    cursor: pointer;
    position: absolute;
    top: 3px;
    left: 3px;
    z-index: 1;
     
    background: #FFF;
  }
    
  .checkbox input[type=checkbox]:checked + label {
    background: #1890ff;
  }
    
  .checkbox span {
    margin-left: 10px;
  }
</style>
    